<template>
  <view class="middle-menu">
    <view 
      v-for="(item, index) in menuList" 
      :key="index" 
      class="menu-item"
      @click="handleClick(item)"
    >
      <view class="icon-container">
        <image 
          :src="item.icon" 
          class="menu-icon"
          mode="aspectFit"
        />
      </view>
      <text class="menu-text">{{ item.title }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MiddleMenu',
  props: {
    menuList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  methods: {
    handleClick(item) {
      this.$emit('click', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.middle-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30rpx;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
  padding: 0 20rpx;
  
  .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20rpx 10rpx;
    border-radius: 8rpx;
    transition: all 0.3s ease;
    
    &:hover {
      background-color: #f5f5f5;
      transform: translateY(-2rpx);
      
      .menu-icon {
        transform: scale(1.1);
      }
    }
    
    &:active {
      transform: translateY(0);
      background-color: #e8e8e8;
    }
    
    .icon-container {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60rpx;
      height: 60rpx;
      margin-bottom: 12rpx;
    }
    
    .menu-icon {
      width: 48rpx;
      height: 48rpx;
      transition: transform 0.2s ease;
    }
    
    .menu-text {
      font-size: 24rpx;
      color: #333;
      text-align: center;
      line-height: 1.2;
    }
  }
}
</style>